<template>
  <div class="question-create-preview">
    <question-card :question="form" />
    <div class="action-div">
      <mu-button :color="buttonInfo.color" @click="submit()">{{ buttonInfo.text }}</mu-button>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { convertCreateQuestionStatusToButtonInfo } from '@/util'
import { submitQuestion } from '@/mixins'
import QuestionCard from '@/components/QuestionCard'

export default {
  name: 'QuestionCreatePreview',
  components: {
    QuestionCard
  },
  mixins: [
    submitQuestion
  ],
  data() {
    return {
      status: {
        id: 0,
        submitting: false,
        question: false,
        image: false
      }
    }
  },
  computed: {
    ...mapGetters({
      form: 'questionCreateForm'
    }),
    buttonInfo() {
      return convertCreateQuestionStatusToButtonInfo(this.status)
    }
  },
  methods: {
    // 提交
    async submit() {
      if (await this.submitQuestion()) {
        this.$router.push({
          name: 'question-create',
          params: {
            redirected: true
          }
        })
      }
    }
  }
}
</script>

<style scoped>
.question-create-preview {
  padding: 12px;
}
.question-image {
  width: 100%;
  height: auto;
}
.action-div {
  display: flex;
  flex-flow: column;
  margin: 12px auto 0;
  width: 500px;
}

.is-phone .action-div {
  width: 100%;
}
</style>
